<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>志愿服务管理系统 - 用户端</title>
    
    <!-- 使用国内CDN加速 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            background-color: #f8f9fa;
        }

        .sidebar {
            background: linear-gradient(to bottom, #337ab7, #2e6da4);
            width: 250px;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            overflow-y: auto;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .sidebar .logo {
            padding: 20px;
            text-align: center;
            color: white;
            font-size: 1.5em;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 20px;
        }

        .sidebar a {
            display: block;
            padding: 15px 20px;
            color: white;
            text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }

        .sidebar a:hover {
            background-color: rgba(255,255,255,0.1);
            padding-left: 25px;
        }

        .sidebar a i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .content {
            margin-left: 250px;
            padding: 30px;
            width: calc(100% - 250px);
            background-color: #f8f9fa;
        }

        #messageArea {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }

        #messages {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #messages li {
            margin-bottom: 10px;
            padding: 15px;
            border-radius: 5px;
            background-color: #f8f9fa;
            border-left: 4px solid #337ab7;
            transition: all 0.3s ease;
        }

        #messages li:hover {
            transform: translateX(5px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .modal-content {
            border-radius: 10px;
            overflow: hidden;
        }

        .modal-header {
            background: linear-gradient(to right, #337ab7, #2e6da4);
            color: white;
            border-bottom: none;
        }

        .modal-body {
            padding: 20px;
        }

        .notification-badge {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1060;
            animation: fadeInOut 0.5s ease;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateY(-20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .page-title {
            margin-bottom: 30px;
            color: #337ab7;
            font-weight: bold;
            text-align: center;
        }

        .message-time {
            font-size: 0.8em;
            color: #6c757d;
            margin-top: 5px;
        }

        .modal-footer {
            border-top: none;
            padding: 1rem;
        }

        .modal-footer .btn-secondary {
            background: #6c757d;
            color: white;
            padding: 8px 20px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .modal-footer .btn-secondary:hover {
            background: #5a6268;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .audio-control {
            text-align: right;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .audio-control .btn-outline-primary {
            transition: all 0.3s ease;
        }

        .audio-control .btn-outline-primary.active {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
        }

        .audio-control .btn-outline-primary.active:hover {
            background-color: #218838;
            border-color: #218838;
        }
    </style>
</head>
<body>

<div class="sidebar">
    <div class="logo">
        <i class="fas fa-hands-helping"></i> 志愿服务系统
    </div>
    <a href="#" th:href="@{/}"><i class="fas fa-home"></i> 首页</a>
    <a th:href="@{/info}"><i class="fas fa-user"></i> 个人信息</a>
    <a href="#" th:href="@{/updateUserPwdPage}"><i class="fas fa-key"></i> 修改密码</a>
    <a href="#" th:href="@{/notify}"><i class="fas fa-bell"></i> 通知</a>
    <a th:href="@{/toActivityList}"><i class="fas fa-list"></i> 活动列表</a>
    <a th:href="@{/myActivity}"><i class="fas fa-calendar-check"></i> 我的活动</a>
    <a th:href="@{/toSign}"><i class="fas fa-signature"></i> 签到</a>
</div>

<div class="content">
    <h2 class="page-title"><i class="fas fa-bell"></i> 最新通知</h2>
    <!-- 添加隐藏的div存储手机号 -->
    <div id="userMobile" th:text="${mobile}" style="display: none;"></div>
    <div id="messageArea">
        <div class="audio-control mb-3">
            <button id="enableAudio" class="btn btn-outline-primary">
                <i class="fas fa-volume-up"></i> 启用提示音
            </button>
            <small class="text-muted ml-2">点击启用消息提示音</small>
        </div>
        <ul id="messages"></ul>
    </div>
</div>

<!-- 优化的消息弹窗 -->
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-envelope-open-text"></i> 新消息通知</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="modalMessage" class="mb-3"></div>
                <small class="text-muted" id="messageTime"></small>
            </div>
            <div class="modal-footer">
                <button onclick="javascript:document.getElementById('notice').pause()" type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> 关闭
                </button>
            </div>
        </div>
    </div>
</div>

<audio id="notice"  loop="loop">
    <source src="/mp3/notification.mp3" type="audio/mpeg">
</audio>

<script>
    var webSocket = new WebSocket('ws://' + window.location.host + '/webSocket');
    
    webSocket.onopen = function(event) {
        console.log('WebSocket连接已建立');
        // 从隐藏的div中获取手机号
        var userMobile = document.getElementById('userMobile').textContent;
        console.log('用户手机号:', userMobile);
        if (userMobile) {
            // 发送用户信息到服务器
            webSocket.send(JSON.stringify({
                type: 'associate',
                mobile: userMobile
            }));
            console.log('已发送用户信息:', userMobile);
        } else {
            console.warn('未获取到用户手机号');
        }
        showNotification('success', '连接已建立');
    }

    webSocket.onclose = function(event) {
        console.log('连接关闭');
        showNotification('warning', '连接已断开，正在尝试重新连接...');
        setTimeout(function() {
            window.location.reload();
        }, 3000);
    }

    let audioEnabled = false;

    document.getElementById('enableAudio').addEventListener('click', function() {
        audioEnabled = !audioEnabled;
        this.classList.toggle('active');
        if (audioEnabled) {
            this.innerHTML = '<i class="fas fa-volume-up"></i> 提示音已启用';
            showNotification('success', '提示音已启用');
        } else {
            this.innerHTML = '<i class="fas fa-volume-up"></i> 启用提示音';
            document.getElementById('notice').pause();
            showNotification('info', '提示音已关闭');
        }
    });

    webSocket.onmessage = function(event) {
        console.log('收到消息:', event.data);
        
        // 更新消息列表
        var messageArea = document.getElementById('messages');
        var li = document.createElement('li');
        li.className = 'message-item';
        
        // 创建消息内容
        var messageContent = document.createElement('div');
        messageContent.className = 'message-content';
        messageContent.textContent = event.data;
        
        // 创建时间戳
        var timeStamp = document.createElement('div');
        timeStamp.className = 'message-time';
        timeStamp.textContent = new Date().toLocaleString();
        
        li.appendChild(messageContent);
        li.appendChild(timeStamp);
        messageArea.insertBefore(li, messageArea.firstChild);

        // 更新并显示弹窗
        document.getElementById('modalMessage').textContent = event.data;
        document.getElementById('messageTime').textContent = '接收时间: ' + new Date().toLocaleString();
        $('#messageModal').modal('show');

        // 10秒后自动关闭弹窗
        setTimeout(function() {
            $('#messageModal').modal('hide');
        }, 10000);

        // 仅在启用音频时播放提示音
        if (audioEnabled) {
            const audio = document.getElementById('notice');
            audio.currentTime = 0; // 重置音频到开始位置
            audio.play().catch(error => {
                console.error('播放提示音失败:', error);
                showNotification('warning', '提示音播放失败，请检查浏览器设置');
                // 如果播放失败，可能是因为没有用户交互，我们保持按钮状态不变
            });
        }

        // 显示通知
        showNotification('info', '收到新消息');
    }

    webSocket.onerror = function(event) {
        console.error('WebSocket错误');
        showNotification('danger', 'WebSocket通信发生错误');
    }

    window.onbeforeunload = function() {
        webSocket.close();
    }

    // 显示通知的函数
    function showNotification(type, message) {
        var notification = document.createElement('div');
        notification.className = `alert alert-${type} notification-badge`;
        notification.textContent = message;
        document.body.appendChild(notification);

        setTimeout(function() {
            notification.remove();
        }, 3000);
    }

    // 当模态框关闭时停止音频
    $('#messageModal').on('hidden.bs.modal', function () {
        document.getElementById('notice').pause();
    });
</script>

</body>
</html>